import { reactive } from "@vue/reactivity";
import { watch } from "@vue/runtime-core";
import { designComponent } from "src/use/designComponent";
import { DemoUseEventHead } from "./DemoUseEventHead";
import { DemoUseEventTableBody } from "./DemoUseEventTableBody";
import "./demoUseTable.scss";

export enum DemoUseEventTablePart {
  head = "head",
  body = "body"
}

const DemoUseEventTable = designComponent({
  name: "demo-use-event-table",
  props: {
    showHeader: { type: Boolean, default: true }
  },
  emits: {
    scroll: (e: Event, part: DemoUseEventTablePart) => true,
    handlePart: (part: DemoUseEventTablePart | null) => true
  },
  provideRefer: true,
  setup({ props, event }) {
    const state = reactive({
      hoverPart: null as null | DemoUseEventTablePart
    });

    watch(
      () => state.hoverPart,
      () => {
        event.emit.handlePart(state.hoverPart);
      }
    );

    return {
      refer: {
        state,
        event
      },
      render: () => {
        const hoverHead = () => (state.hoverPart = DemoUseEventTablePart.head);
        const hoverBody = () => (state.hoverPart = DemoUseEventTablePart.body);
        return (
          <div class="demo-use-event-table" onMouseleave={() => (state.hoverPart = null)}>
            {/*// @ts-ignore*/}
            {props.showHeader && <DemoUseEventHead onMouseenter={hoverHead} />}
            {/*// @ts-ignore*/}
            <DemoUseEventTableBody onMouseenter={hoverBody} />
          </div>
        );
      }
    };
  }
});

export default DemoUseEventTable;
